可以使用jquery函数轻松地将字符串转换为树，操作节点并转换回字符串吗？

Question

能否使用 jquery 函数轻松将字符串转换为树、操作节点以及转换回字符串？

原始问题：选择器和 .html() 等 jquery 函数如何用于字符串操作？

更新：

• 我在以下位置找到了相关信息 这个问题parse html string with jquery
• Ben Alman 有一个例子 replaceText 作为一个 jquery 插件 它走树并替换 文字
• 来自 question and answer 的其他见解，了解如何将 jquery 对象转换为字符串

首先jquery可以用于以下吗？ （我稍后会验证）

var b = $('<a href="#">bacon</a>').html(); 

b === 'bacon'，答案是肯定的。

如何使用jQuery进行字符串操作：（修改自a sample highlighting answer）

var key = 'bacon';
var str = '<a href="#">bacon</a><a href="#">tastes great</a>';
$(str).contents().each(function() {
  var node = this;
  if (node.nodeType == 3) {
    var text = node.nodeValue;
    text = text.replace(new RegExp(key, "g"),
            '<span class="Someclass">'+key+'</span>'
        ));
    //replace existing node value with text
});
// convert tree into string

所需的输出是带有修改元素的字符串：

str = '<a href="#"><span class="Someclass">bacon</span</a><a href="#">tastes great</a>';

Answer 1

是的，但你想要.html()：

var b = $('<a href="#">bacon</a>').html();
// Or,
var b = $('<a href="#">bacon</a>')[0].innerHTML;

至于第二个例子：

$('<a href="#">bacon</a>').html(function (i, oldHtml) {
    return oldHtml.replace(/(bacon)/g, '<span class="SomeClass">$1</span>');
});

Answer 2

我会说“不完全是”。您尝试进行的特定更改可以如 Box9 所示完成，但就语义而言，据我所知，我会说您不使用 jQuery 进行字符串操作。

jQuery 可用于读取和修改 DOM，其存在部分是为了使该过程成为跨浏览器的标准。

一旦您阅读了 DOM，但在更新它之前，您解析和更改它的部分可以通过操作字符串来完成，但实际的字符串操作将使用纯 Javascript。

Answer 3

我已经读过这个问题和相应的 cmets & 链接几次了，但我仍然不确定实际的问题是什么，但是......

jquery 函数可以轻松使用吗 将字符串转换为树，操作 一个节点，并转换回一个 字符串？

是的。

诀窍是使用包装元素，以及 jQuery html() 和 text() 方法。 Here is a fiddle 告诉你我的意思。

有时，您想使用文本来获取元素中的所有文本，而不是像包装 或 标记那样抓取所有子元素。在它是一个 dom 元素之后，您可以使用 dom 操作来追加、添加类、修改属性以及所有类似的东西，然后再将其转换回字符串。

这就是你要找的答案吗？

编辑：Doh！在我打字的时候得到了回答

Answer 4

使用Ben Alman's replaceText 和object to html string 转换器技巧让它工作

function one() {
    var key = 'bacon';
    var str = '<a href="#">bacon nation</a> <a href="#">tastes good</a>';
    dump("before str contents: " + str);
    str = $(str).replaceText(new RegExp(key,"gi"),'<span class="SomeClass">' + key + '</span>');
    str = $('<div>').append($(str).clone()).remove().html();
    dump("after str contents: " + str);
}

以及所需的输出：

<a href="#"><span class="SomeClass">bacon</span> nation</a><a href="#">tastes good</a>

为了完整起见，我已经包含了主要调用 html + 脚本

    <style type="text/css"> .SomeClass { background-color: yellow } </style>
    <script type="text/javascript">
        function dump(str) {
            $('<div>' + str + '<br/></div>').appendTo('body');
        }
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.ba-replacetext.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            one();
        });
    </script>