LADYX, html-код вставляете как текст в текстовый узел.
|
Nexus,
так вот же: item.textContent=item.textContent.replace(item.__hiddenPart,'<span class='phone_number_xxxx'>xxxx</span>'); или я неправильно понимаю? |
LADYX, вы значение свойства textContent изменяете, html будет в обычный текст преобразован.
item - ссылка на текстовый узел. Как в него html затолкать - не представляю. Можно на основе этого элемента создать span и заменить текст этим span'ом и дальше работать с ним. |
Цитата:
|
Nexus,
что-то типа этого?
$(".phone_number").html(function(index, text) {
return text.replace(new RegExp("xxxx", 'g'), "<span class='phone_number_xxxx'>xxxx</span>")
});
|
LADYX, так listener'ы отвалятся, но можете попробовать.
|
Nexus,
ну да, замена идет, но при попытке показать номер неудача |
<style>
.phone_number_xxxx{
padding-right:10px;
}
</style>
<span class="phone_number">+74951182647<span class="phone_number_active">Показать</span></span><br>
<span class="phone_number">+74951182647<span class="phone_number_active">Показать</span></span>
<script>
[].forEach.call(document.querySelectorAll('.phone_number'),function(el){
var hide = /(\d{4})[А-Я\s]/.exec(el.textContent)[1];
el.innerHTML = el.innerHTML.replace(hide, '');
var btn = el.querySelector('.phone_number_active');
btn.insertAdjacentHTML('beforebegin', '<span class="phone_number_xxxx">xxxx</span>');
var xxx = el.querySelector('.phone_number_xxxx');
btn.onclick = function(){
xxx.textContent = xxx.textContent.replace(/xxxx/, hide);
};
});
</script>
|
Еще вариант
<style>
.phone_number {
background: linear-gradient(to right, white 0%, black 50%);
}
.phone_number_active { background-color:white;}
</style>
<span class="phone_number">+74953332211<span class="phone_number_active"> Показать</span></span>
<script>
document.querySelector(".phone_number_active").onclick = function() {
document.querySelector(".phone_number").style.background = "white";
}
</script>
|
Dilettante_Pro,
:lol: |
| Часовой пояс GMT +3, время: 20:01. |