Question

我在Google或此处找不到任何相关信息。

我有一个div，一些文本和一些html：

<div id="test-div">
    http://<strong>somewebsite.com</strong>/big/long/unfriendly/path/
</div>

我想要做的是在每个斜线后添加<wbr>。（因为该值不会另外包裹并且弄乱了我的桌子）。在$('#test-div').html()上进行简单替换也会破坏强标记，因此这不是一个选项。

我认为使用$('#test-div').contents()过滤掉文本部分（递归）会起作用。但是我似乎无法编辑返回的各个位。我希望这会改变http：// part：

$('#test-div').contents().first().text("something");

然而它什么也没做。我知道我的导航正确，因为这样的事情：

$('#test-div').contents().first().wrap( "<b></b>" );

确实有效。

为什么我不能更改文本位？（对最初问题更优雅的解决方案也会很棒）

Answer 1

像这样使用：

$('#test-div').contents().filter(function(){
    return $.trim($(this).text()) == 'http://';
}).remove().end().prepend('something');

demo

，或者

$('#test-div').contents().first().remove().end().prepend("something");

demo

Answer 2

你试过吗

$(element).html('your content here');

Answer 3

使用/替换/<wbr>的正则表达式怎么样？

$('#test-div').html($('#test-div').html().replace(/(<)?[/]/g, function($0,$1){ 
    return $1?$0:'/<wbr>';
}));

/(<)?[/]/g将查找所有正斜杠，但也会特别注意任何结束标记。

return $1?$0:'/<wbr>';会忽略</，但会将/替换为/<wbr>

您可能需要考虑关闭wbr代码。

Answer 4

你尝试过这样的事吗？

$('#test-div').html().replace('/', '/<wbr>');

Answer 5

因为当你说首先它给你[object Text]并且text属性不能用它时，最简单的解决方案是：

$("#test-div").contents()[0].textContent="Something";

Jsfiddle demo

Answer 6

最终，由于this和this项目，我找到了自己的答案。我现在有一个函数替换上下文中所有文本节点中的所有文本。它还可以将HTML插入到所述节点中。

JavaScript函数：

function recursiveReplace(node, oldValue, newValue) {
    if (node.nodeType === 3) { // text node
        $(node).replaceWith(node.nodeValue.replace(oldValue, newValue));
    } else if (node.nodeType === 1) { // element
        $(node).contents().each(function() {
            recursiveReplace(this, oldValue, newValue);
        });
    }
}

//To call
div = $('#test-div');
recursiveReplace(div[0], "/", "/<wbr />");

这以通用的方式解决了它。

Jquery $（element）.contents（）。first（）。text（“new text”）不起作用？

6 个答案: