Question

如何让它不替换文本框输入上的文本？键入时不会这样做，但是如果你去编辑包含替换信息的文档或输入字段，它将无法进行编辑。

我试过这样做，但它只是关闭整个脚本。的xD

<script type='text/javascript'>
        document.body.innerHTML = document.body.innerHTML.replace(/E0/g, '<img src="http://s31.postimg.org/5riz5vn0b/Zero.png" title="E"/>');
        document.body.innerHTML = document.body.innerHTML.replace(/E10/g, '<img src="http://s31.postimg.org/6wm82qo8r/ten.png" title="E"/>');
        document.body.innerHTML = document.body.innerHTML.replace(/E20/g, '<img src="http://s31.postimg.org/4j4abq9tn/twenty.png"title="E"/>');
        document.body.innerHTML = document.body.innerHTML.replace(/E30/g, '<img src="http://s31.postimg.org/mzyp2jprv/thirty.png"title="E"/>');
        document.body.innerHTML = document.body.innerHTML.replace(/E40/g, '<img src="http://s31.postimg.org/j4vazz6m3/forty.png"title="E"/>');
    </script>

以下是我在网页上看到的问题图片：

Answer 1

您可以使用document.querySelectorAll()与选择器字符串"body *"来选择除<body>之外的所有元素; for循环;通过在<input>条件下过滤.replace() INPUT媒体资源，从单个.tagName来电中排除if个元素

＆＃13;

<div>E0 E10 E20 E30 E40</div>
<input type="text" value="E40" />
<script type='text/javascript'>
  var elems = document.querySelectorAll("body *");
  var url = "http://s31.postimg.org/";
  for (var i = 0; i < elems.length; i++) {
    if (elems[i].tagName !== "INPUT") {
      elems[i].innerHTML = elems[i].innerHTML
        .replace(/(E0)|(E10)|(E20)|(E30)|(E40)/g
        , function(match, p1, p2, p3, p4, p5) {
          if (p1) return "<img src=" + url 
            + "5riz5vn0b/Zero.png title=E/>";
          if (p2) return "<img src=" + url 
            + "6wm82qo8r/ten.png title=E/>";
          if (p3) return "<img src=" + url 
            + "4j4abq9tn/twenty.png title=E/>";
          if (p4) return "<img src=" + url 
            + "mzyp2jprv/thirty.png title=E/>";
          if (p5) return "<img src=" + url 
            + "j4vazz6m3/forty.png title=E/>";
        })
    }
  }
</script>

＆＃13;

Answer 2

另一种方法可能是在文档中搜索包含E0，E10，E20，E30，E40的文本节点，跳过那些是TEXTAREA和INPUT元素的子节点，并替换每个文本节点保留包含文本和图像的元素。

这应该避免替换innerHTML容器元素的潜在问题，这些容器元素中包含需要保持不变的元素。虽然以下代码在IE和Firefox中运行，但它尚未在您的应用程序的完整上下文中进行测试。

function textToImages() // within document.body
{
    var checkAny = /E0|E10|E20|E30|E40/g;
    function filter( node)
    {   checkAny.lastIndex=0;
        if(checkAny.test(node.nodeValue))
        {   switch(node.parentNode.tagName)
            {   case "INPUT":
                case "TEXTAREA":  
                    return NodeFilter.FILTER_SKIP;
            }
            return NodeFilter.FILTER_ACCEPT;
        }
        return NodeFilter.FILTER_SKIP;
    }
    filter.acceptNode = filter; // cross browser compatability
    var scan = document.createNodeIterator(
        document.body,
        NodeFilter.SHOW_TEXT,
        filter,
        false
    );
    var node, replaceList=[];

    document.body.normalize();
    while(node = scan.nextNode())
        replaceList.push(node);
    if( replaceList.length)
        replaceList.forEach( replaceTextNode);

    function replaceTextNode( node)
    {   var html = node.nodeValue;
        var span = document.createElement("span");
        html=html.replace(/E0/g, '<img src="http://s31.postimg.org/5riz5vn0b/Zero.png" title="E"/>');
        html=html.replace(/E10/g, '<img src="http://s31.postimg.org/6wm82qo8r/ten.png" title="E"/>');
        html=html.replace(/E20/g, '<img src="http://s31.postimg.org/4j4abq9tn/twenty.png" title="E"/>');
        html=html.replace(/E30/g, '<img src="http://s31.postimg.org/mzyp2jprv/thirty.png" title="E"/>');
        html=html.replace(/E40/g, '<img src="http://s31.postimg.org/j4vazz6m3/forty.png"title="E"/>');
        span.innerHTML = html;
        node.parentNode.replaceChild(span, node);
    }
}

NodeIterator用于扫描DOM中的文本节点，过滤那些包含要替换的文本的节点，这些节点不是TEXTAREA或INPUT元素的子节点，并创建 static 要处理的节点列表。

我在IE中document.createNodeIterator遇到问题，这需要至少4个参数，并且要求其第3个参数是函数。如果您在其他浏览器中遇到问题，我建议您编写自定义DOM遍历和过滤代码，以避免完全使用NodeIterator。

通过过滤器的文本节点被包含零个或多个文本节点和一个或多个图像元素的SPAN元素替换。节点替换功能基本上使用问题中发布的代码。虽然应该可以使用一个或多个文本和图像节点替换单个文本节点，而不使用容器，但是需要额外的编码来创建和操作DOM元素。

Javascript用图像替换文本排除文本框输入

2 个答案: