Fatal编程技术网
  • javascript/
  • Javascript将文本替换为图像排除文本框输入

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

javascript image input replace

Javascript将文本替换为图像排除文本框输入,javascript,image,input,replace,textbox,Javascript,Image,Input,Replace,Textbox,如何使其不替换文本框输入上的文本？它不会在键入时执行此操作，但如果您要编辑包含替换信息的文档或输入字段，则会执行此操作，并且无法进行编辑 我试过这么做，但它只是关闭了整个脚本。xD <script type='text/javascript'> document.body.innerHTML = document.body.innerHTML.replace(/E0/g, '<img src="http://s31.postimg.org/5riz5vn0b/Z

如何使其不替换文本框输入上的文本？它不会在键入时执行此操作，但如果您要编辑包含替换信息的文档或输入字段，则会执行此操作，并且无法进行编辑

我试过这么做，但它只是关闭了整个脚本。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>


document.body.innerHTML=document.body.innerHTML.replace（/E0/g'）；
document.body.innerHTML=document.body.innerHTML.replace（/E10/g'）；
document.body.innerHTML=document.body.innerHTML.replace（/E20/g'）；
document.body.innerHTML=document.body.innerHTML.replace（/E30/g'）；
document.body.innerHTML=document.body.innerHTML.replace（/E40/g'）；
以下是我在网页上看到的问题的图像：

您可以使用带有选择器字符串的
document.queryselectoral（）
“body*”来选择除
之外的所有元素<代码>用于循环；从单个
.replace（）
调用中排除
元素，方法是在
if
条件下过滤
输入
.tagName
属性



E0 E10 E20 E30 E40
var elems=document.queryselectoral（“body*”）；
变量url=”http://s31.postimg.org/";
对于（变量i=0；i
另一种方法可能是在文档中搜索包含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);
    }
}



函数textToImages（）//在document.body中
{
var checkAny=/E0 | E10 | E20 | E30 | E40/g；
函数过滤器（节点）
{checkAny.lastIndex=0；
if（选中any.test（node.nodeValue））
{开关（node.parentNode.tagName）
{案例“输入”：
案例“TEXTAREA”：
返回NodeFilter.FILTER\u跳过；
}
返回NodeFilter.FILTER\u接受；
}
返回NodeFilter.FILTER\u跳过；
}
filter.acceptNode=filter；//跨浏览器兼容性
var scan=document.createNodeIterator(
文件正文，
NodeFilter.SHOW_TEXT，
过滤器，
假的
);
变量节点，replaceList=[]；
document.body.normalize（）；
while（node=scan.nextNode（））
replaceList.push（节点）；
if（replaceList.length）
replaceList.forEach（replaceTextNode）；
函数replaceTextNode（节点）
{var html=node.nodeValue；
var span=document.createElement（“span”）；
html=html.replace（/E0/g'）；
html=html.replace（/E10/g'，）；
html=html.replace（/E20/g'）；
html=html.replace（/E30/g'）；
html=html.replace（/E40/g'）；
span.innerHTML=html；
node.parentNode.replaceChild（跨度，节点）；
}
}


A用于扫描DOM中的文本节点，筛选包含要替换的文本的节点，这些节点不是TEXTAREA或INPUT元素的子节点，并创建要处理的节点的静态列表

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


通过过滤器的文本节点被包含零个或多个文本节点和一个或多个图像元素的
SPAN
元素替换。节点替换功能基本上使用问题中发布的代码。虽然可以将单个文本节点替换为一个或多个文本和图像节点，但不需要使用容器，这将需要额外的编码来创建和操作DOM元素。
您还不清楚要做什么。我知道英语可能不是你的第一语言（提示：我不认为excluside是一个真正的单词…）我也不会用这个词
it
这个代词指的是什么并不清楚。您是否使用开发者工具在Chrome浏览器中试用过您的示例？我猜你有错误锁定了脚本。Chrome开发者工具将准确地告诉您错误是什么。此外，您可能会考虑使用jsFoDelp来显示示例代码中的问题。您在标签和标题中提到TeXbox，但在代码中没有任何文本框。你想干什么？你想向你的网页用户展示什么？那是一个打字错误。修复了它。>\uu>代码没有错误。我需要它不影响文本框输入。任何文本被替换为图像的文本框都是这样的：我不知道如何在不关闭整个脚本的情况下使其不影响文本框输入字段。代码中的某些内容正在将%值粘贴到网页上的区域。为什么不在将值粘贴到系统中的同时将图像粘贴到html中？被替换的值由用户控制。他们放入变量，代码用一个图像替换它。我仍然需要替换它，只是不在文本框或输入字段中。这仍然在更改输入字段的内容。它稍微好一点，因为它允许我与它互动，