我如何用 JavaScript 替换这些词？

Question

我想将 CAR BUS 重命名为 MY CAR，将 WATER 重命名为 BREAKFAST，并删除现在显示的可口可乐和芬达。人们告诉我必须用 JS 替换它，但我不知道。

<li class="dropdown">
  <a href="#" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">
                  CARS BUS<b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li><a href="/development/#current-developments">WATER</a></li>
    <li><a href="/development/#future-developments">COCA COLA</a></li>
    <li><a href="/development/#past-developments">FANTA</a></li>
  </ul>
</li>

Answer 1

如果您可以访问底层 HTML，则根本不需要使用 JavaScript。所以如果你有访问权限，请在 HTML 中更改它。

如果您没有访问权限，则必须执行以下步骤：

1) 使用 DOM 查询抓取要更改的元素 (document.querySelector & document.querySelectorAll)

2) 将他们的innerHTML 更改为所需的文本

根据您展示的 HTML，其中最棘手的部分将是 DOM 查询。主要是因为没有多少可以识别正确的元素（通过id 或class）。要确定您是否使用了正确的元素，您还必须比较它们的内容。

这应该可行：

function queryAll(s, r) {
  return Array.prototype.slice.call((r || document).querySelectorAll(s));
}

function isTarget(needle, element) {
  var regex = new RegExp(needle);
  return regex.test(element.innerHTML);
}

function changeText (needle, replacement, element) {
  element.innerHTML = element.innerHTML.replace(needle, replacement);
}


var dropdowns = queryAll('a[data-toggle="dropdown"]');
dropdowns.forEach(function (anchor) {
  if (isTarget('CARS BUS', anchor)) {
    var subAnchors = queryAll('a', anchor.nextElementSibling);
    changeText('CARS BUS', 'MY CAR', anchor);
    subAnchors.forEach(function (sub) {
      if (isTarget('WATER', sub)) {
        changeText('WATER', 'BREAKFAST', sub);
      } else {
        sub.parentNode.style.display = 'none';
      }
    });
  }
});

<li class="dropdown">
  <a href="#" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">
                  CARS BUS<b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li><a href="/development/#current-developments">WATER</a></li>
    <li><a href="/development/#future-developments">COCA COLA</a></li>
    <li><a href="/development/#past-developments">FANTA</a></li>
  </ul>
</li>

Answer 2

// Plain JS
// `document.querySelector` will get the first element that matches
// inside selector `>` means that you want to get the direct child of --- in this case `.dropdown`
var $carbus = document.querySelector( 'li.dropdown > a' ), // element
    $dropdownMenu = document.querySelector( '.dropdown-menu' ), // dropdown-menu
    $firstLi = $dropdownMenu.querySelector( 'li > a' ), // element with water text
    $notFirstLi = $dropdownMenu.querySelectorAll( 'li:not(:first-of-type)' ); // last two `li` items

replaceWord( $carbus, 'cars bus', 'my car' ); // replacing `cars bus` with `my car`
replaceWord( $firstLi, 'water', 'breakfast'  ); // replacing `water` with `breakfast`

// removing last two items
$notFirstLi.forEach(function (item) {
    item.remove();
});

/**
 * @param {Element} el - target element 
 * @param {String} oldWord - Old word you want to change
 * @param {String} newWord - New word you want to show
 */
function replaceWord(el, oldWord, newWord) {
    var re = new RegExp( oldWord.toUpperCase(), 'i' ),
        newTxt = el.innerText.replace(re, newWord.toUpperCase());
    el.innerText = newTxt;
}

<li class="dropdown">
    <a href="#" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">CARS BUS<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="/development/#current-developments">WATER</a></li>
        <li><a href="/development/#future-developments">COCA COLA</a></li>
        <li><a href="/development/#past-developments">FANTA</a></li>
    </ul>
</li>