个人中心
gpt4 book ai didi

javascript - jQuery 查找/替换而不改变原始文本

转载 作者：数据小太阳 更新时间：2023-10-29 05:41:32 24 4
gpt4 key购买 nike

在 jQuery 中有没有一种方法可以在 jQuery 中找到一个文本字符串，而不是用其他东西替换它，而是用一个元素包装该文本，这样当脚本完成时，它会吐出原始文本和包装的文本字符串。

例子:

原文

"Hello world to all people"

搜索字符串

"world to"

替换为<i></i>

最终输出

"Hello <i>World to</i> all people"

在此先感谢您的帮助!

工作代码的种类:

function highlightChild(child) {
        $(childElements[child]).text("");
        console.log(child);
        $('.child_element_' + child).bind('textselect', function(e){
            var selection = e.text;
            var str = $("#construct_version").text();
            var wrap = jQuery(childElements[child]).text(selection);
            var re = new RegExp("" + selection + "", "g");

            console.log(str.replace(selection, function(match, key, val){
                console.log(match);
                console.log(key);
                console.log(val);
                jQuery(childElements[child]).text(val)
            }));
        });
    }

上面的代码进行了替换，但实际进行替换的地方显示为未定义。

因此，如果原始字符串是 Hello world to all 并且我想将 world 替换为 <b>world to</b> ，它在 console.log 中显示为 Hello undefined all

最佳答案

一般来说，更改页面内容并不像替换 html() 那样简单用正则表达式标记。如果标记本身中有匹配的文本，所有此类尝试都将失败，当浏览器选择以不符合您期望的方式序列化其 DOM 时可能会失败，并且充其量，当它起作用时，仍然会强制您序列化并重新解析所有搜索到的文本，这很慢并且会破坏所有不可序列化的信息，例如表单字段值、JavaScript 引用和事件处理程序。对于简单的低级元素，您可以摆脱它，但对于像 <body> 这样的容器那会很糟糕。

更好:与其破解 HTML 字符串，不如坚持使用实时 DOM 节点，搜索 Text符合您要求的节点并对纯文本节点数据进行替换。这是一些简单的 JS 代码(我想如果你愿意，你可以把它放在一个插件中。)

// Utility function to find matches in an element's descendant Text nodes,
// calling back a function with (node, match) arguments. The `pattern` can
// be a string, for direct string matching, or a RegExp object (which must
// be a `g`lobal regex.
//
function findText(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            var tag= child.tagName.toLowerCase();
            if (tag!=='script' && tag!=='style' && tag!=='textarea')
                findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            if (typeof pattern==='string') {
                var ix= 0;
                while (true) {
                    ix= child.data.indexOf(pattern, ix);
                    if (ix===-1)
                        break;
                    matches.push({index: ix, '0': pattern});
                }
            } else {
                var match;
                while (match= pattern.exec(child.data))
                    matches.push(match);
            }
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

使用纯字符串搜索词的示例用法:

// Replace “World to” string in element text with <i>-wrapped version
//
var element= $('#construct_version')[0];
findText(element, 'World to', function(node, match) {
    var wrap= document.createElement('i');
    node.splitText(match.index+match[0].length);
    wrap.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(span, node.nextSibling);
});

关于javascript - jQuery 查找/替换而不改变原始文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4060056/

24 4 0
文章推荐： xcode - swift UITesting 错误 : Invalid escape sequence in literal.\U201c
文章推荐： javascript - 使用 JQuery 为 标签添加 onclick 属性
文章推荐： ios - 如何更改 JSQMessagesController 中的发送按钮图像
文章推荐： JavaScript 递增数组中的数字
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com