Как изменить текст в промежутке внутри строки HTML?

Question

Я дошел до того, что знал, что строки являются неизменяемыми объектами в jquery, но это не помогает мне решить эту проблему.

Это упрощенная версия. У нас есть строка таблицы. Мне нужно изменить текст в идентификаторе диапазона «rptRepeater_lblMiddleName_0» с «Уильям» на «W».

Какой лучший способ сделать это?

Мы пробовали html, текст, но кажется, что мы не можем изменить строку.

function GetChangedMiddleName {

var strTableRow = '<tr><td><span id="rptRepeater_lblFirstName_0">John</span></td><td><span id="rptRepeater_lblMiddleName_0">William</span></td><td><span id="rptRepeater_lblLastName_0">Smith</span></td></tr>'

$(strTableRow).find('[id*=_lblMiddleName_]').text('W.');

return strTableRow;
}

Результат должен быть:

'<tr><td><span id="rptRepeater_lblFirstName_0">John</span></td><td><span id="rptRepeater_lblMiddleName_0">W.</span></td><td><span id="rptRepeater_lblLastName_0">Smith</span></td></tr>'

Answer 1

Вы можете изменить его, вызвать end(), чтобы вернуть искатель, а затем получить externalHTML для сохранения обратно в переменную.

function GetChangedMiddleName() {

  var strTableRow = '<tr><td><span id="rptRepeater_lblFirstName_0">John</span></td><td><span id="rptRepeater_lblMiddleName_0">William</span></td><td><span id="rptRepeater_lblLastName_0">Smith</span></td></tr>'

  strTableRow = $(strTableRow).find('[id*=_lblMiddleName_]').text('W.').end().prop('outerHTML');

  return strTableRow;
}


console.log(
  GetChangedMiddleName()
);

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

Answer 2

При разборе подобных фрагментов вам, вероятно, лучше использовать $.parseHTML(), чем $().

Когда вы закончите, либо верните элементы, полученные в результате анализа, или, если у вас есть для преобразования обратно в HTML, вы можете использовать outerHTML в строке, чтобы сделать это, см. Комментарии:

function GetChangedMiddleName() {

    var strTableRow = '<tr><td><span id="rptRepeater_lblFirstName_0">John</span></td><td><span id="rptRepeater_lblMiddleName_0">William</span></td><td><span id="rptRepeater_lblLastName_0">Smith</span></td></tr>'

    // Parse the HTML
    var result = $($.parseHTML(strTableRow));
    
    // Do the update
    result.find('[id*=_lblMiddleName_]').text('W.');

    // If you can just return the parsed result, do that
    // return result;
    
    // If it has to be a string, use outerHTML on the row to get the string
    return result[0].outerHTML;
}
console.log(GetChangedMiddleName());

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