Question

我有这个HTML：

<div class="test">Orange <span class="is">is</span> my favorite color.</div>

我只想替换Orange（以及后面的空格）。使用.text()将无效，因为它会选择整个强项。

我该怎么做？

Answer 1

使用jQuery比使用本机DOM更难，所以如果你使用jQuery，你将不得不使用jQuery的数组索引将元素转换为本机DOM

基本上，我们需要做的是更改第一个文本节点。 jQuery对于文本节点并不是很好，这就是我们在这里使用DOM的原因：

＆＃13;

//This gets the div.test element using jQuery:
var testDiv = $("div.test");
function changeColor(color) {
    /* The following function changes the value of the first text node within testDiv: */
    //This converts testDiv from a jQuery element to a regular DOM element. This is because jQuery isn't really meant to be handling stuff like text nodes, so doing this with the regular DOM will just be much easier.
    var domElement = testDiv[0];
    //Now, just change the value of the first text node:
    domElement.childNodes[0].nodeValue = color;
}

//Now, as you can see if you click div.test, we can replace the color mentioned in div.test using changeColor():
testDiv.click(function() {
    changeColor("Blue ");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Orange <span class="is">is</span> my favorite color.</div>

＆＃13;

Answer 2

您应该使用原生DOM方法。在你的情况下，简单的事情只是改变第一个childNode元素的nodeValue属性（你知道它将是TextNode元素）：

＆＃13;

var el = $('.test');
el[0].childNodes[0].nodeValue = 'Green ';

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Orange <span class="is">is</span> my favorite color.</div>

＆＃13;

或者如果你想要，你可以使用jQuery＆＃39; $.fn.contents方法获取文本节点：

＆＃13;

var el = $('.test');
el.contents()[0].nodeValue = 'Green ';

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Orange <span class="is">is</span> my favorite color.</div>

＆＃13;

Answer 3

如果您使用的是jquery，那么这就是解决方案

    $('.test').html(function(){
        return $(this).html().replace('Orange ','');
    });

在此处找到小提琴：https://jsfiddle.net/MasoomS/xff6dw1t/

使用data attribute来优化代码并将其用于多个字符串

HTML：

 <div class="test" data-replace="Orange ">Orange <span class="is">is</span> my favorite color.</div>
 <div class="test" data-replace="Green ">Green <span class="is">is</span> my next favorite color.</div>

JQUERY：

    $('.test').html(function(){
        return $(this).html().replace($(this).data('replace'),'');
    });

Answer 4

RefferenceDocument

如何用子项替换元素中的部分文本？

4 个答案: