Как я могу получить прямой текст без тега с jQuery

Question

У меня проблема с тем, что я хочу выделить (и заменить) строку текста без тегов с jQuery. Мне нужно получить «лобби us-east1-mp2», но он только выделяет текст с интервалом.

Мой код:

function fixServerLocation() {
  setTimeout(function() {
    if ($(".admin.chatLog").find(".section").length > 0) {
      var section = ($(".admin.chatLog").find(".section"));
      if (typeof section !== 'undefined') {
        var chatMessages = document.querySelectorAll("[id^='chatMessage']");
        if (typeof chatMessages !== 'undefined') {
          $('.section [id^="chatMessage"]').children('div.details').children().css({
            "color": "red",
            "border": "2px solid red"
          });;
          //The code that I currently have to select the tag-less text. The styling is only to highlight it.
        }
      }
    }
    fixServerLocation();
  }, 70);
}
fixServerLocation();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chatMessage listItem first" id="chatMessage-us-east1-mp2-6668675">
  <button class="expand small" type="button" tabindex="-1">+</button>
  <div class="options right"></div>
  <div class="details"><span class="time">2020-04-04 11:07</span>us-east1-mp2 lobby

    <span><span class="username adminLookup">CommanderAnime</span></span>:

    <span class="message ">Test</span></div>
</div>

Как это выглядит в данный момент при запуске кода:

Я хочу заменить "us- East1-MP2 вестибюль "с" Ньюарк лобби ". Спасибо за любую помощь

Answer 1

Это довольно опасно, если ваш текст является частью текстовых атрибутов

ПРИМЕЧАНИЕ: поскольку я удаляю обработчик событий при перезаписи HTML, вам необходимо делегировать кнопку:

$("#someStaticContainerForTheChatMessages").on("click","button.expand",function() { whatever the button does })

$(function() {
  const $chatMessages = $("[id^='chatMessage']");
  if ($chatMessages.length > 0) {
    $chatMessages.each(function(i, message) {
      $('div.details', message).children().addClass("highlight")
      message.innerHTML = message.innerHTML.replace("us-east1-mp2 lobby", "Newark lobby")
    })
  }
})

.highlight {
  color: red;
  border: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="chatMessage listItem first" id="chatMessage-us-east1-mp2-6668675">
  <button class="expand small" type="button" tabindex="-1">+</button>
  <div class="options right"></div>
  <div class="details"><span class="time">2020-04-04 11:07</span>us-east1-mp2 lobby<span><span class="username adminLookup">CommanderAnime</span></span>:

    <span class="message ">Test</span></div>
</div>

Answer 2

Если вы используете jquery, вы можете легко добиться этого, используя javascript String.replace метод:

const detailsHtml = $('.details').html()
const replacedContent = detailsHtml.replace('us-east1-mp2 lobby', 'Newark lobby')

$('.details').html(replacedContent)

В чем идея: поскольку этот текст не находится внутри тега, вам нужно получить весь div html в виде строки и выполнить замену. Первая строка возвращает html содержимое .details в виде строки.

Затем мы выполняем замену и используем тот же метод .html(value) для установки нового содержимого.

Проверьте скрипка: https://jsfiddle.net/diogocosta/7wrmLog5/5/

const detailsHtml = $('.details').html()
const replacedContent = detailsHtml.replace('us-east1-mp2 lobby', 'Newark lobby')
$('.details').html(replacedContent)

//console.log(replacedContent)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chatMessage listItem first" id="chatMessage-us-east1-mp2-6668675">
  <button class="expand small" type="button" tabindex="-1">+</button>
  <div class="options right"></div>
  <div class="details"><span class="time">2020-04-04 11:07</span>us-east1-mp2 lobby

    <span><span class="username adminLookup">CommanderAnime</span></span>:

    <span class="message ">Test</span></div>
</div>