Question

如何突出显示（或提供任何特殊标记）特殊字符，例如‘’“”‛‟′″˝？谢谢。使用查找和替换.innerHTML.replace()不起作用，因为它会破坏事件处理程序和DOM。

我已尝试过以下内容，但最终只能以纯文本而非代码的span结尾。

function highlightText(node, find, rep){
    if(node){
        node= node.firstChild;
        while(node!= null){
            if(node.nodeType== 3){
                node.data= node.data.replace(find, rep);
            }
            else highlightText(node, find, rep);
            node= node.nextSibling;
        }
    }
    return true;
}

highlightText(document.body,/‘/g, "<span style='background: red; color: white;'>‘</span>")
highlightText(document.body,/’/g, "<span style='background: red; color: white;'>’</span>")
highlightText(document.body,/“/g, "<span style='background: red; color: white;'>“</span>")
highlightText(document.body,/”/g, "<span style='background: red; color: white;'>”</span>")
highlightText(document.body,/‛/g, "<span style='background: red; color: white;'>‛</span>")
highlightText(document.body,/‟/g, "<span style='background: red; color: white;'>‟</span>")
highlightText(document.body,/′/g, "<span style='background: red; color: white;'>′</span>")
highlightText(document.body,/″/g, "<span style='background: red; color: white;'>″</span>")
highlightText(document.body,/˝/g, "<span style='background: red; color: white;'>˝</span>")

Answer 1

以下是一些适用于所有主流浏览器的代码。我已经在Stack Overflow上发布了此代码的变体（例如here，here和here），并且它很好且通用，所以我（或任何其他人）不要我必须改变它以重复使用它。

jsFiddle示例：http://jsfiddle.net/eh8FE/

代码：

// Reusable generic function
function surroundInElement(el, regex, surrounderCreateFunc) {
    // script and style elements are left alone
    if (!/^(script|style)$/.test(el.tagName)) {
        var child = el.lastChild;
        while (child) {
            if (child.nodeType == 1) {
                surroundInElement(child, regex, surrounderCreateFunc);
            } else if (child.nodeType == 3) {
                surroundMatchingText(child, regex, surrounderCreateFunc);
            }
            child = child.previousSibling;
        }
    }
}

// Reusable generic function
function surroundMatchingText(textNode, regex, surrounderCreateFunc) {
    var parent = textNode.parentNode;
    var result, surroundingNode, matchedTextNode, matchLength, matchedText;
    while ( textNode && (result = regex.exec(textNode.data)) ) {
        matchedTextNode = textNode.splitText(result.index);
        matchedText = result[0];
        matchLength = matchedText.length;
        textNode = (matchedTextNode.length > matchLength) ?
            matchedTextNode.splitText(matchLength) : null;
        surroundingNode = surrounderCreateFunc(matchedTextNode.cloneNode(true));
        parent.insertBefore(surroundingNode, matchedTextNode);
        parent.removeChild(matchedTextNode);
    }
}

// This function does the surrounding for every matched piece of text
// and can be customized  to do what you like
function createSpan(matchedTextNode) {
    var el = document.createElement("span");
    el.style.backgroundColor = "red";
    el.style.color = "white";
    el.appendChild(matchedTextNode);
    return el;
}

// The main function
function wrapSpecialChars(container) {
    surroundInElement(container, /[‘’“”‛‟′″˝]+/, createSpan);
}

wrapSpecialChars(document.body);

Answer 2

更改HTML中任何文本格式的唯一方法是在围绕文本的HTML元素上定义样式。因此，如果您只想突出显示某些字符，那么这些字符必须每个都包含一个HTML元素，通常是span，尽管您可能更加语义化。

所以，我不确定“废墟事件处理程序和DOM”是什么意思，但是你将不得不修改DOM以突出显示字符。没有办法解决这个问题。

据我所知，如果替换innerHTML的整个树，将删除这些节点，然后添加新节点。但是，如果不知道你已经在处理什么，我们就无法真正给你替代。

如果您真的要在整个页面中突出显示某些字符，则必须非破坏性地执行此操作：

创建一个递归操作的函数
迭代节点的所有子节点作为参数
如果节点是元素，则使用新节点
如果节点是文本节点，请用HTML替换该文本节点，将字符包装在所需的范围内。
使用要替换的内容的根节点调用上述函数。

Answer 3

您可以使用特殊对象功能。 JQuery可以帮助您在短时间内完成它。

例如，您可以更改加载页面时要突出显示的对象样式。这里有一个主要的想法。

<body onload='highlight()'>
...
</body>

，其中

function highlightSpan( content )
{
  return "<span style='background: yellow'>" + content + "</span>";
}

function hightlight()
{
  var highlightChars = "‘’“”‛‟′″˝";
  // change body content (and highlight chars)

  var bodyContent = $( "body" ).html();

  for( var i = 0; i < highlightChars.length; i++ )
  {
     var highlightChar = highlightChars[ i ];
     bodyContent = bodyContent.replace( highlightChar, highlightSpan( highlightChar ) );
  }

  $( "body" ).html( bodyContent );

}

您可以使用 document.getElementsByTagName（“body”）[0] .innerHTML 代替 $（“body”）。html（）。

可能 replace（）只会替换一个匹配的第一个字符。所以你可以使用 replace（/（'|'|“|”| | |“| | |”）/ g，highlightSpan（something））; 。并用〜解决问题，这是一个特殊的正则表达式字符。

javascript突出显示的字符

3 个答案: