如何使用Javascript或JQuery在HTML指定XML标签内搜索文本

原生JavaScript实现 #

你原有代码中的french.getElementById属于无效写法，getElementById是document对象的内置方法，不能通过自定义标签名调用。完整可运行的实现代码如下：

<!-- 交互控件 -->
<input type="text" id="findInput" value="" size="20" placeholder="输入搜索关键词" />
<button onclick="searchFrench();">搜索法语词汇</button>
<button onclick="searchEnglish();">搜索英语词汇</button>
<div id="searchResult"></div>

<!-- 原有词典内容结构保持不变 -->
<p><french>bonjour</french> <english>hello</english></p>
<p><french>merci</french> <english>thank you</english></p>
<!-- 更多词典内容 -->

<script>
// 搜索法语标签内容
function searchFrench() {
  const searchStr = document.getElementById('findInput').value.trim().toLowerCase();
  if (!searchStr) {
    document.getElementById('searchResult').textContent = '请输入搜索关键词';
    return;
  }
  const frenchTags = document.getElementsByTagName('french');
  const matchedList = [];
  for (const tag of frenchTags) {
    const text = tag.textContent.trim().toLowerCase();
    if (text.includes(searchStr)) {
      matchedList.push(tag.textContent);
      // 如需高亮匹配项可添加：tag.style.background = '#ffff00'
    }
  }
  if (matchedList.length) {
    document.getElementById('searchResult').textContent = `匹配到的法语词汇：${matchedList.join('、')}`;
  } else {
    document.getElementById('searchResult').textContent = '未找到匹配的法语词汇';
  }
}

// 搜索英语标签内容
function searchEnglish() {
  const searchStr = document.getElementById('findInput').value.trim().toLowerCase();
  if (!searchStr) {
    document.getElementById('searchResult').textContent = '请输入搜索关键词';
    return;
  }
  const englishTags = document.getElementsByTagName('english');
  const matchedList = [];
  for (const tag of englishTags) {
    const text = tag.textContent.trim().toLowerCase();
    if (text.includes(searchStr)) {
      matchedList.push(tag.textContent);
      // 如需高亮匹配项可添加：tag.style.background = '#ffff00'
    }
  }
  if (matchedList.length) {
    document.getElementById('searchResult').textContent = `匹配到的英语词汇：${matchedList.join('、')}`;
  } else {
    document.getElementById('searchResult').textContent = '未找到匹配的英语词汇';
  }
}
</script>

如果需要精确匹配而非模糊匹配，把代码中的text.includes(searchStr)修改为text === searchStr即可。

jQuery实现 #

使用jQuery可以简化DOM操作逻辑，使用前需要先引入jQuery库，实现代码如下：

<!-- 交互控件 -->
<input type="text" id="findInput" value="" size="20" placeholder="输入搜索关键词" />
<button id="searchFrenchBtn">搜索法语词汇</button>
<button id="searchEnglishBtn">搜索英语词汇</button>
<div id="searchResult"></div>

<!-- 原有词典内容结构保持不变 -->
<p><french>bonjour</french> <english>hello</english></p>
<p><french>merci</french> <english>thank you</english></p>
<!-- 更多词典内容 -->

<script src="替换为你本地的jQuery文件路径或者公共CDN地址"></script>
<script>
// 法语搜索逻辑
$('#searchFrenchBtn').on('click', function() {
  const searchStr = $('#findInput').val().trim().toLowerCase();
  if (!searchStr) {
    $('#searchResult').text('请输入搜索关键词');
    return;
  }
  const matchedList = [];
  $('french').each(function() {
    const text = $(this).text().trim().toLowerCase();
    if (text.includes(searchStr)) {
      matchedList.push($(this).text());
      // 高亮匹配项：$(this).css('background', '#ffff00')
    }
  });
  if (matchedList.length) {
    $('#searchResult').text(`匹配到的法语词汇：${matchedList.join('、')}`);
  } else {
    $('#searchResult').text('未找到匹配的法语词汇');
  }
});

// 英语搜索逻辑
$('#searchEnglishBtn').on('click', function() {
  const searchStr = $('#findInput').val().trim().toLowerCase();
  if (!searchStr) {
    $('#searchResult').text('请输入搜索关键词');
    return;
  }
  const matchedList = [];
  $('english').each(function() {
    const text = $(this).text().trim().toLowerCase();
    if (text.includes(searchStr)) {
      matchedList.push($(this).text());
      // 高亮匹配项：$(this).css('background', '#ffff00')
    }
  });
  if (matchedList.length) {
    $('#searchResult').text(`匹配到的英语词汇：${matchedList.join('、')}`);
  } else {
    $('#searchResult').text('未找到匹配的英语词汇');
  }
});
</script>

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