如何使用jQuery合并文本内容与元素内容？

要把指定DOM节点下的普通元素文本内容和INPUT这类表单元素的取值合并成格式化的字符串，咱们可以结合jQuery的遍历能力和自定义判断逻辑来实现，具体步骤和代码如下：

实现步骤与核心代码 #

1. 引入jQuery库 #

首先确保页面中引入了jQuery，这里用官方CDN版本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2. 定义内容获取函数 #

写一个自定义函数来区分元素类型，返回对应的内容：

function getText(key, node) {
  // 判断当前元素是否为INPUT，是的话返回value值，否则返回文本内容
  if (node.tagName == 'INPUT') {
    return node.value;
  } else {
    return node.textContent;
  }
}

3. 遍历元素并合并内容 #

使用jQuery的find()、map()方法遍历目标节点下的所有元素，收集内容后做格式化处理：

// 提取指定div下所有元素的有效内容并格式化
const mergedContent = $("div").find('*').map(getText).get().join(' ').trim().replace(/\s+/g, ' ');
console.log(mergedContent); // 输出结果：A B 4 C

示例HTML结构 #

配合上面的代码，你可以用这样的测试结构：

<div>
  <span>A</span>
  <div> B <input value='4'> <span>C</span> </div>
</div>

代码逻辑解释 #

• $("div").find('*')：选中目标div下的所有子元素
• .map(getText)：遍历每个元素，用自定义函数获取对应的内容
• .get()：把jQuery对象转换成原生数组
• .join(' ')：把数组元素用空格拼接成字符串
• .trim().replace(/\s+/g, ' ')：去除首尾空格，并把多个连续空格替换成单个，保证格式整洁

内容的提问来源于stack exchange，提问作者BMaehr