Javascript-форум - JS скрипт замены html

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - JS скрипт замены html (https://javascript.ru/forum/misc/51634-js-skript-zameny-html.html)

candro

13.11.2014 17:40

JS скрипт замены html

Всем привет, задался вопросом, а как сделать через js замену html блока(строки)?
К примеру есть блок <div class="block">, а нужно чтоб через js заменялось к примеру на <div class="block2"></div><div class="block">

Всем за ранее спасибо!

danik.js

13.11.2014 18:20

HTML, загруженный браузером - это уже не строка, а DOM - объектная модель документа.

krutoy

13.11.2014 19:13

candro,
да это легко вообще сделать. Например

<html>
<head>
<meta charset="windows-1251">
<style>
.block1{background: red}
.block2{background: green}
</style>
</head>
<body>

<div id="wrap">
<div class="block1">block1</div>
<div class="block2">block2</div>
</div>
<button id="but">push</button>

<script>

but=document.querySelector("#but")
wrap=document.querySelector("#wrap")

but.onclick=function(){
   var re=/<div.*block1.*\/div>/,
       block=wrap.innerHTML,
       block=block.replace(re, "<div class='block2'>block2</div>")
       wrap.innerHTML=block
}

</script>

</body>
</html>

Может я чо не так понял?

danik.js

13.11.2014 19:29

krutoy, твой код не кроссбраузерный.

danik.js

13.11.2014 19:29

Не работает в IE8

danik.js

13.11.2014 19:30

А все из-за тупого косяка твоего.

krutoy

13.11.2014 19:31

danik.js,
А что именно? У меня нет IE:)

danik.js

13.11.2014 19:36

krutoy, а нехер выеживаться. Нужно var писать при объявлении переменных.

krutoy

13.11.2014 19:39

danik.js,
Я не пойму, какая связь? Там в первоначальном варианте div был не закрыт. Может ты первый вариант проверял? Если нет, то хотелось бы, все-таки, понять логику и специфику его поведения.

candro

13.11.2014 19:44

Эм, кроссбраузерность не важна, просто есть потребность, чтоб этот DOM элемент <div class="block">, заменялся на <div class="block2"></div><div class="block"> к примеру. Просто нужно сделать замену этого элемента через JS.
Самое главное, происходить это должно без нажатия куда либо.

krutoy

13.11.2014 19:54

candro,
Ну так, убери кнопку, и вызывай ф-цию напрямую, какие проблемы? Я кнопку в демонстрационных целях добавил

krutoy

13.11.2014 19:57

candro,

<html>
<head>
<meta charset="windows-1251">
<style>
.block1{background: red}
.block2{background: green}
</style>
</head>
<body>
 
<div id="wrap">
<div class="block1">block1</div>
<div class="block2">block2</div>
</div>
 
<script>
 
wrap=document.querySelector("#wrap")
 
;(function(){
   var re=/<div.*block1.*\/div>/,
       block=wrap.innerHTML,
       block=block.replace(re, "<div class='block2'>block2</div>")
       wrap.innerHTML=block
})()
 
</script>
 
</body>
</html>

candro

13.11.2014 20:16

Понятно, а как, но что-то разобраться не могу, вот если заменять в коде только начало блока <div class="block1"> на
<div class="block2"></div><div class="block1">. Что поправить нужно?

<script>

wrap=document.querySelector("#wrap")

;(function(){
var re=/<div.*block1.*\/,
block=wrap.innerHTML,
block=block.replace(re, "<div class='block2'>block2</div><div class='block1'>")
wrap.innerHTML=block
})()

</script>

Так нужно?

danik.js

13.11.2014 20:30

Цитата:

Сообщение от krutoy

хотелось бы, все-таки, понять логику и специфику его поведения

Просто пиши var при объявлении переменных , как все нормальные люди и ни о какой специфике думать не нужно)

danik.js

13.11.2014 20:31

Ты ведь в курсе, что объявление с var и без - не одно и тоже?

krutoy

13.11.2014 20:34

Цитата:

Сообщение от danik.js

Ты ведь в курсе, что объявление с var и без - не одно и тоже?

В глобальной области видимости, одно и то же, вроде.

krutoy

13.11.2014 20:42

candro, проще всего наверное так

<html>
<head>
<meta charset="windows-1251">
<style>
.block1{background: red}
.block2{background: green}
</style>
</head>
<body>
  
<div id="wrap">
<div class="block1">block1</div>
<div class="block2">block2</div>
</div>
  
<script>
  
wrap=document.querySelector("#wrap")
  
;(function(){
   var re=/<div\s+class\s*=\s*['"]\s*block1\s*['"]/,
       block=wrap.innerHTML,
       block=block.replace(re, "<div class='block2'")
       wrap.innerHTML=block
})()
  
</script>
  
</body>
</html>

krutoy

13.11.2014 20:45

danik.js,
Там есть нюансы, конечно, криво-реализационно-специфичные:). Но принципиальную разницу я только в ноде раньше замечал.

А если все переменные без вар заменить на window.variable работает?

candro

13.11.2014 20:52

Получается он добавляет после блока1 блок2, верно?

krutoy

13.11.2014 20:55

Цитата:

Сообщение от candro

Получается он добавляет после блока1 блок2, верно?

Нет. Он меняет текст <div class="block1" на текст <div class='block2
Кусок текста меняет. А блок2 там как был так и остался.

danik.js

13.11.2014 20:57

Цитата:

Сообщение от krutoy

А если все переменные без вар заменить на window.variable работает?

Да

candro

13.11.2014 21:00

спасибо

krutoy

13.11.2014 21:09

Цитата:

Сообщение от danik.js

Да

Странно:) Я как-то читал какую-то спеку, там было написано, что переменные c var должны копироваться в глобальный объект. С точки зрения языка, это одно и то же. То есть ссылка var a должна указывать туда же, куда, и window.a Переменная объявленная без var , соответственно, это то же, что и window.a, глобальная область===window, a=1 === window.a=1. Единственное отличие в том, что на переменные с var навешивается св-во dontDelete. То есть, те что без var имеют свой неймспейс, по-сути, отличный от window, но они должны "копироваться" туда. Поэтому, с точки зрения семантики там все чисто. Это пидоры из M$ че-то намудрили в реализации, суки:)

Мне, в принципе, не трудно писать эти вары гребаные, можно дже автоподстановку настроить. Но во-первых, надо знать это все по-идее, наверняка, что и как работает, а не плясать с бубном, поэтому эксперементирую. Во вторых, возможны траблы с удалением ссылок. Самый безопасный вариант, наверное тут, объявлять всегда как свойство глобального объекта, явно, я к этому уже начал склоняться.

krutoy

13.11.2014 22:13

Цитата:

Сообщение от candro

К примеру есть блок <div class="block">, а нужно чтоб через js заменялось к примеру на <div class="block2"></div><div class="block">

Вот Вам, на всякий случай, точное воспроизведение вашего примера

<html>
<head>
<meta charset="windows-1251">
<style>
.block{background: red}
.block2{background: green}
</style>
</head>
<body>
   
<div id="wrap">
 <div class="block">block</div>
</div>
   
<script>
   
wrap=document.querySelector("#wrap")
   
;(function(){
   var re=/(<div\s+class\s*=\s*['"]\s*block\s*['"][^>]*>)/,
       block=wrap.innerHTML,
       block=block.replace(re, "<div class='block2'>block2</div>$1")
       wrap.innerHTML=block
})()
   
</script>
   
</body>
</html>

Если я правильно понял.

Часовой пояс GMT +3, время: 12:33.