CSS 选择器 - 如何提取不属于标签的字符串？

Question

<div class="class1">
this is string hi hi hi
    <div class="class2">
        hi 
    </div>
</div> 

result: "this is string hi hi hi"

是否可以仅使用 css 选择器提取不属于标签的字符串？应排除 class2 中的内容。

Answer 1

在这种情况下，将原始文本放入 div 并不是一个好方法。我建议你把 span 或其他内联标签，然后把你的字符串放在里面，这样问题就容易多了。

如果在这种情况下只想提取字符串，可以使用textContent 属性.

const class1 = document.getElementsByClassName('class1')[0]
const class2 = document.getElementsByClassName('class2')[0]
const text1 = class1.textContent
const text2 = class2.textContent
console.log(text1.substr(0, text1.lastIndexOf(text2)))

<div class="class1">
this is string hi hi hi
    <div class="class2">
        hi 
    </div>
</div>

Answer 2

我想出了一个解决办法。你需要触摸文档，但实际上不会影响文档，因为我这里做的是后台做的。

let newElementStr = class1.innerHTML;//Get the content of Class 1 including Class 2
//Create a duplicate of Class 1 Element and hide it.
let newElement = document.createElement('div');
newElement.style.display = 'none';
newElement.innerHTML = newElementStr;
newElement.id = 'new-el';
//Remove the Class 2 Element
let class2Element = document.querySelector('#new-el .class2');
document.remove(class2Element);
let content = newElement.innerHTML;//This is the string you want
document.remove(newElement);//Cleaning up

您不必担心会触及文档，因为此代码所做的所有更改都不会影响文档，因为它们是隐藏的display: none;

希望对你有用！

CSS 选择器 - 如何提取不属于标签的字符串？

CSS Selectors - How to extract a string that doesn't belong to a tag?

css

selector