javascript字符高亮显示_Javascript

javascript字符高亮显示
javascript
javascript字符高亮显示,javascript,Javascript,如何突出显示（或提供任何特殊标记）特殊字符，如'''''.'''''.''等？谢谢使用find and replace.innerHTML.replace（）无法工作，因为它会破坏事件处理程序和DOM 我尝试了以下方法，但结果是纯文本的span，而不是代码 function highlightText(node, find, rep){ if(node){ node= node.firstChild; while(node!= null){
如何突出显示（或提供任何特殊标记）特殊字符，如
'''''.'''''.''等？谢谢使用find and replace.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>")

函数高亮文本（节点、查找、代表）{
如果（节点）{
node=node.firstChild；
while（节点！=null）{
if（node.nodeType==3）{
node.data=node.data.replace（find，rep）；
}
else highlightText（节点、查找、代表）；
node=node.nextSibling；
}
}
返回true；
}
highlightText（document.body，/'/g，“'））
highlightText（document.body，/'/g，“'））
highlightText（document.body，/“/g，”）
highlightText（document.body，/“/g，”）
highlightText（document.body，/“/g，”）
highlightText（文件正文，/“/g，”）
highlightText（document.body，/'/g，“'”）
高亮文本（document.body，/“/g，”）
highlightText（document.body，/˝/g，“˝”）
更改HTML中任何文本格式的唯一方法是在围绕文本的HTML元素上定义样式。因此，如果您只想突出显示某些字符，那么这些字符必须用HTML元素包装，通常是span
，尽管您可能更具语义
因此，我不确定“破坏事件处理程序和DOM”是什么意思，但您必须修改DOM以突出显示字符。这是没有办法的
我知道，如果您替换整个innerHTML
树，这些节点将被删除，然后添加新节点。然而，我们不能在不知道你已经在处理什么的情况下给你选择

如果您确实想在整个页面上突出显示某些字符，则必须以非破坏性方式进行：
创建一个递归操作的函数
迭代作为参数的节点的所有子节点
如果节点是元素，则使用新节点递归调用self
如果该节点是文本节点，请将该文本节点替换为HTML，将字符包装在所需的范围内
使用要替换的内容的根节点调用上述函数
您可以为此使用特殊的对象函数。JQuery可以帮助您在短时间内完成这项工作
例如，您可以更改对象的样式，以便在加载页面时高亮显示。这里有一个主要的想法
<body onload='highlight()'>
...
</body>


...

在哪里
function highlightSpan（内容）
{
返回“+内容+”；
}
函数hightlight（）
{
var highlightChars=“”“”“”“”“”“”）；
//更改正文内容（并突出显示字符）
var bodyContent=$（“body”）.html（）；
对于（变量i=0；i

您可以使用document.getElementsByTagName（“body”）[0].innerHTML而不是$（“body”）.html（）
May be replace（）将只替换一个匹配的第一个字符。所以你可以用replace（/（“|”|“|”|“|”|“|”|“）/g，highlightSpan（某物））；相反并用~这是一个特殊的regexp字符来解决问题。
以下是一些在所有主要浏览器中都能使用的代码。我以前在Stack Overflow上发布过这段代码的变体（，和，例如），并且使它变得很好和通用，所以我（或其他任何人）不需要对它做太多更改就可以重用它
JSFIDLE示例：
代码：
但事实并非如此，例如.innerHTML.replace（）
可以替换页面上的任何随机单词（包括添加span
），而无需更改页面的HTML，因为页面根本无法访问。但是这样做会破坏DOM和所有事件处理程序，从而破坏页面的其余部分。必须有一个好的方法来做到这一点。@user793238那么什么是错误的呢？我认为这与我所说的没有矛盾。我确实说过设置innerHTML将替换树的该部分中的所有节点。@Renesis您说过在这之前应该将字符包装在span中，但事实并非如此。即使没有，也可以这样做，但这样做会破坏DOM和所有事件句柄。我不知道你想要什么，这样你才能帮上忙。不，我说的是，它们必须用一个跨距包装，以便突出显示。如果不修改DOM，就无法突出显示它们。替换整个DOM的innerHTML并不是唯一的方法，因为是的，这会破坏和重建整个DOM。好的，你能帮忙吗？但如果后端表单输出时带有突出显示的字符，效果会更好。问题是整个DOM被删除并替换为新节点。OP提到这是他/她首先要避免的问题。
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 );

}

// 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);