英文:
How do I turn all text on an HTML page into a single string while keeping the CSS?
问题
我想替换HTML文档中每个HTML元素中的所有文本为单个字符"A"。
假设我有一个这样的页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Document</title>
</head>
<body>
<h1>This is some text</h1>
<h2>This is some smaller text</h2>
<h3>This is even smaller text</h3>
<div id="some-important-id">
<div id="something"></div>
</div>
</body>
<script>
// 在这里放置代码
</script>
</html>
我需要页面中的所有文本都被转换为字母"A"，但我们不想更改div，因为它包含子HTML元素而不是文本。
我所需要的是：
<h1>A</h1>
<h2>A</h2>
<h3>A</h3>
<div id="some-important-id">
<div id="something"></div>
</div>
我们不触及div，因为它可能包含一些对其有用的代码。
英文:
I want to replace all text within each HTML element in an HTML document with a single character "A".
Suppose I have a page like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Document</title>
</head>
<body>
<h1>This is some text</h1>
<h2>This is some smaller text</h2>
<h3>This is even smaller text</h3>
<div id="some-important-id">
<div id="something"></div>
</div>
</body>
<script>
// put the code here
</script>
</html>
I need all the text in a page to be converted to the letter "A", but we don't want to change the div, because it contains child HTML elements not text.
What I needed:
<h1>A</h1>
<h2>A</h2>
<h3>A</h3>
<div id="some-important-id">
<div id="something"></div>
</div>
We don't touch the div, because it may contain some useful code for it.
答案1
得分: 1
遍历页面上的所有元素。如果元素只包含一个文本节点，那么它是一个只包含文本的叶子元素。将其文本替换为 A。
document.querySelectorAll("*").forEach(el => {
if (el.childNodes.length == 1 && el.childNodes[0].nodeType == Node.TEXT_NODE) {
el.innerText = 'A';
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的文档</title>
</head>
<body>
<div>
<h1>这是一些文本</h1>
<h2>这是一些较小的文本</h2>
<h3>这是更小的文本</h3>
</div>
</body>
</html>
英文:
Loop through all the elements on the page. If the element only contains a single text node, then it's a leaf element with text. Replace its text with A.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.querySelectorAll("*").forEach(el => {
if (el.childNodes.length == 1 && el.childNodes[0].nodeType == Node.TEXT_NODE) {
el.innerText = 'A';
}
})
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Document</title>
</head>
<body>
<div>
<h1>This is some text</h1>
<h2>This is some smaller text</h2>
<h3>This is even smaller text</h3>
</div>
</body>
</html>
<!-- end snippet -->
答案2
得分: 0
这段代码使用 document.body.getElementsByTagName(""*"") 选择 HTML 文档主体中的所有元素。然后，它遍历每个元素，并将其内部文本替换为重复长度等于原始内部文本的字母 "A"。这很可能是一个使用 JavaScript 操纵 DOM 的测试或演示。希望对你有所帮助！
英文:
This code selects all elements in the body of the HTML document using document.body.getElementsByTagName("*"). Then, it loops through each element and replaces its inner text with the letter "A" repeated for the length of the original inner text. This is likely a test or demonstration of manipulating the DOM using JavaScript. Hope it helps you!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var elements = document.body.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var characterCount = element.innerText.length;
element.innerText = "A".repeat(characterCount);
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Document</title>
</head>
<body>
<h1>This is some text</h1>
<h2>This is some smaller text</h2>
<h3>This is even smaller text</h3>
</body>
</html>
<!-- end snippet -->
答案3
得分: 0
你可以使用JavaScript来实现类似以下的操作：
// 获取HTML文档的根元素
var rootElement = document.documentElement;
// 递归遍历DOM并提取文本内容的函数
function extractTextFromElement(element) {
var text = '';
// 如果元素是文本节点，则连接其内容
if (element.nodeType === Node.TEXT_NODE) {
text += element.textContent.trim();
}
// 如果元素具有子节点，则递归从每个子节点提取文本
else if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0) {
for (var i = 0; i < element.childNodes.length; i++) {
text += extractTextFromElement(element.childNodes[i]);
}
}
return text;
}
// 用根元素调用该函数
var extractedText = extractTextFromElement(rootElement);
// 将提取的文本作为单个字符串打印出来
console.log(extractedText);
这段代码使用JavaScript递归遍历HTML文档的DOM树，并提取文本内容，最后将提取的文本作为单个字符串打印出来。
英文:
you can use JS and implement something like like
// Get the root element of the HTML document
var rootElement = document.documentElement;
// Function to recursively traverse the DOM and extract text content
function extractTextFromElement(element) {
var text = '';
// If the element is a text node, concatenate its content
if (element.nodeType === Node.TEXT_NODE) {
text += element.textContent.trim();
}
// If the element has child nodes, recursively extract text from each child
else if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0) {
for (var i = 0; i < element.childNodes.length; i++) {
text += extractTextFromElement(element.childNodes[i]);
}
}
return text;
}
// Call the function with the root element
var extractedText = extractTextFromElement(rootElement);
// Print the extracted text as a single string
console.log(extractedText);
// Get the root element of the HTML document
var rootElement = document.documentElement;
// Function to recursively traverse the DOM and extract text content
function extractTextFromElement(element) {
var text = '';
// If the element is a text node, concatenate its content
if (element.nodeType === Node.TEXT_NODE) {
text += element.textContent.trim();
}
// If the element has child nodes, recursively extract text from each child
else if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0) {
for (var i = 0; i < element.childNodes.length; i++) {
text += extractTextFromElement(element.childNodes[i]);
}
}
return text;
}
// Call the function with the root element
var extractedText = extractTextFromElement(rootElement);
// Print the extracted text as a single string
console.log(extractedText);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论