Изменение HTML с помощью JavaScript

Question

Я пытаюсь заменить каждый экземпляр «Администратор» на моей странице на «Администратор» или что-то подобное.Как бы я заменить это?Если это помогает, span находится внутри тега, который имеет класс «user-title».Как и эта страница , но мне нужно получить ответ.Я впервые работаю с JavaScript.

<ul class="author-ident"> 
    <li class="username">
        <a title="Go to Different55's profile" href="http://fwin.co.cc/pun/profile.php?id=2">Different55</a>
    </li> 
    <li class="usertitle">
        <span>Administrator</span>
    </li> 
    <li class="userstatus">
        <span>Online</span>
    </li> 
</ul>

Answer 1

Я работаю в основном с JQuery , поэтому я могу дать вам только решение JQuery на макушке головы. Извините, если это не вариант для вас. С JQuery вы можете сделать это ...

$(".user-title").each(function(index){
   $(this).html($(this).html().replace("Administrator", "Admin"));
});

ПРИМЕЧАНИЕ. Если вы ожидаете более одного экземпляра «Administrator» для каждого тега span, вам нужно будет выполнить регулярное выражение, как показано ниже ...

.replace(/Administrator/g, "Admin");

См. this для получения дополнительной информации о флаге регулярного выражения (например, "g" означает глобальный - более одного)

РЕДАКТИРОВАТЬ : Вот версия JavaScript ....

var spans = document.getElementsByClassName("user-title");
for (var i = 0; i < spans.length; i++)
{
  spans[i].innerHTML = spans[i].innerHTML.replace(/Administrator/g, "Admin");
}

ОТВЕТ : Это основано на предоставленном вами примере HTML (обратите внимание, что я изменил имя класса "usertitle" на основе вашего HTML, проверьте, правильно ли это) ...

var parents = document.getElementsByClassName("usertitle");
for (var i = 0; i < parents.length; i++)
{
    var spans = parents[i].getElementsByTagName("span");
    for(var j = 0; j < spans.length; j++){
        spans[j].innerHTML = spans[j].innerHTML.replace(/Administrator/g, "Admin");
    }
}

Эквивалент JQuery ...

$(".usertitle span").each(function(index){
   $(this).html($(this).html().replace("Administrator", "Admin"));
});

Answer 2

Вы можете использовать эту функцию:

function correct() {
var a  = document.getElementsByClassName("user-title");
var i = 0;
for(i=0; i<a.length; i++) {
       while((a[i].innerHTML).indexOf("Administrator") >= 0){
    a[i].innerHTML = a[i].innerHTML.replace(/Administrator/g, 'Admin');
       }
}
}

эта функция будет получать коллекцию всех элементов, имеющих имя класса как "user-title".затем n в цикле for, мы получим доступ к каждому элементу в коллекции, посмотрим, есть ли внутри innerHTML слово, которое вы хотите заменить, и, если оно есть, мы заменим его.

Answer 3

Чтобы выполнить указанную вами замену (замена всех вхождений Администратора на Администратора во всех промежутках внутри .user-title, используйте:

$('.user-title span').each(function() {
    $(this).html($(this).html().replace(/Administrator/g, 'Admin'));
});

ПРИМЕЧАНИЕ. Предполагается, что вы используете jQuery в своем приложении

Answer 4

<script type="text/javascript">
function changeText(){
document.getElementById('anId').innerHTML = 'my friend';
 }
</script>
<p>Welcome to the site <b id='anId'>dude</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>

Это изменит содержание этого

. Вы можете запустить JS, который будет смотреть каждый диапазон, и, если вы найдете «администратора», вы можете использовать этот фрагмент кода.

Answer 5

Поместите все экземпляры слова «Администратор» в <span> с определенным классом, например:

<span class="user_type">Administrator</span>

Затем вы можете использовать jQuery для:

$("span.user_type").html("Admin");

Обратите внимание, что это, возможно, не самая приятная вещь, но мы не располагаем никакой другой информацией о том, чего вы пытаетесь достичь.