Добавление содержимого в тег <text>через JS

Question

Бит застрял при попытке заставить это работать.

Были проблемы с сервером, изменяющим строку с x на x *. Пожалуйста, воспринимайте Asterix буквально.

Я пытаюсь обойти это, используя 'contains ()' JQuery для обнаружения текста и применения к нему класса.

<text fill="#FF8201" style="font-size: 13.2px;" x="0" y="327.58888888888885" fill-opacity="1">JIMMY</text>

Javascript:

 $(document).ready(function(){
 $("text:contains(JIMMY)").addClass('an');
 });

CSS:

text.an::after {
content: '*';
}

Но это не работает. Не знаю почему ...

Answer 1

Вот стандартное Javascript решение, в котором мы создаем функцию с именем changeText, которая принимает два аргумента queryText: текст для поиска и appendText текст, который нужно добавить в конец queryText.

//function searches for all <text> elements within svg tags for the queryText 
//  and then appends them with the appendText
function changeText(queryText, appendText) {
    let textElements = document.querySelectorAll('svg text'); // get all text elements within SVG as a NodeList
    textElements.forEach(el => {  // go through each text element
        if (el.innerHTML === queryText) { // if the innerHTML matches the query HTML then
            el.innerHTML = el.innerHTML + appendText; // append the text
        }
    })
}

document.addEventListener("DOMContentLoaded", function(){
    //pass in the search text and the appending text as arguments
    changeText('JIMMY', '*');
});

<svg width="400" height="500">
  <text fill="#FF8201" style="font-size: 13.2px;" x="0" y="10" fill-opacity="1">JIMMY</text>
  <text fill="#FF8201" style="font-size: 13.2px;" x="0" y="30" fill-opacity="1">NOT JIMMY</text>
</svg>

Answer 2

В одном из приведенных выше комментариев есть ссылка на JSFiddle. При просмотре я не вижу проблем, так как отображается *. Единственное, что я заметил, это то, что вы использовали JQuery, поэтому я думал только об этом, если вам не понравился ваш JQuery или CSS должным образом. Как вы, возможно, знаете, вы можете создать ссылку на JQuery, используя CDN:

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

Или вы можете загрузить файлы JQuery и прикрепить их из локального файла:

<script src="/jquery/3.5.1/jquery.min.js"></script>

Или это может быть проблема при связывании файла CSS (который содержит стили классов):

<link rel="stylesheet" href="/CSS/style.css" type="text/css" />

Кроме этого, я понятия не имею.