主页 / user-20458

Yuri's questions

Martin Hope
Yuri
Asked: 2020-08-21 17:12:22 +0000 UTC
  • 4

很多人问如何把NodeList、HTMLColletion等伪数组变成Array。所以我需要相反的。也就是说，我需要将一个Array，例如，变成一个NodeList。

怎么做？

有两个“但是”：

  1. 我不知道我到底有什么：NodeList、HTMLColletion 或其他一些伪数组；但是我有一个带有该原型的伪数组来将数组转换为。
  2. 不要提供通过参数更改__proto__的选项，因为我需要一个至少可以在 IE10 中使用的选项
javascript
Martin Hope
Yuri
Asked: 2020-08-15 19:24:14 +0000 UTC
  • 9

如何在没有 jquery 的情况下制作 jquery 动画功能？有了 CSS 属性，一切就很清楚了：它们可以通过过渡和动画来绘制，但是如何才能平滑地更改 HTML 呢？

如何在 3 秒内平滑更改进度条的值和旁边的数字？那些。如何在 3 秒内将条形附近的宽度和值从 10% 平滑更改为 80%？

.progress {
  display: inline-block;
  width: 200px;
  height: 12px;
  border: 1px solid black;
  border-radius: 6px;
  overflow: hidden;
}
.progress_bar {
  display: inline-block;
  width: 10%;
  height: 14px;
  background-color: #3f51b5;
}

.progress_val {
  display: inline-block;
}
<div class="progress">
  <div class="progress_bar"></div>
</div>
<div class="progress_val">10%</div>

javascript
Martin Hope
Yuri
Asked: 2020-08-02 03:45:14 +0000 UTC
  • 9

我正在编写自己的函数来为伪元素分配属性，并注意到一个未知错误。属性的分配通过向样式表添加行来进行。

当我在第三种情况下调用该函数时，由于某种原因第一个元素被涂成蓝色，尽管color我没有为它设置它。

(function() {
  var setPseudoElement = function(parameters) {
    for (var element of parameters.elements.get()) {
      if (!element.pseudoElements) element.pseudoElements = {
        styleSheet: null,
        before: {
          index: null,
          properties: null
        },
        after: {
          index: null,
          properties: null
        }
      };

      var selector = (function() {
        if (element.id) {
          return '#' + element.id + '::' + parameters.pseudoElement;
        } else {
          var parentsList = $(element).parents().map(function() {
            return this.tagName.toLowerCase();
          }).get().reverse().join(' > ') + ' > ' + element.tagName.toLowerCase();

          var elementClass = element.classList.length ? '.' + $(element.classList).get().join('.') : '';

          var elementAttributes = element.hasAttributes() ? $(element.attributes).get().map(function(className) {
            return className.nodeName !== 'class' ? className.nodeValue ? '[' + className.nodeName + '="' + className.nodeValue + '"]' : '[' + className.nodeName + '"]' : '';
          }).join('') : '';

          var elementNthChild = ':nth-child(' + ($(element).index() + 1) + ')';

          return parentsList + elementClass + elementAttributes + elementNthChild + '::' + parameters.pseudoElement;
        };
      })();

      if (!element.pseudoElements.styleSheet) {
        if (document.styleSheets[0]) {
          element.pseudoElements.styleSheet = document.styleSheets[0];
        } else {
          var styleSheet = document.createElement('style');

          document.head.appendChild(styleSheet);
          element.pseudoElements.styleSheet = styleSheet.sheet;
        };
      };

      if (element.pseudoElements[parameters.pseudoElement].properties !== null && element.pseudoElements[parameters.pseudoElement].index !== null) {
        element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);
      };

      if (typeof parameters.argument === 'object') {
        if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
          var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;

          element.pseudoElements[parameters.pseudoElement].index = newIndex;
          element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
        };

        var properties = '';

        for (var property in parameters.argument) {
          element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
        };

        for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
          properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
        };

        element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
      } else if (parameters.argument !== undefined && parameters.property !== undefined) {

      } else if (parameters.argument !== undefined && parameters.property === undefined) {

      } else {
        console.error('Invalid values!');
        return false;
      };
    };
  };

  $.fn.cssBefore = function(argument, property) {
    setPseudoElement({
      elements: this,
      pseudoElement: 'before',
      argument: argument,
      property: property
    });
  };
})();

$(function() {
  // Случай 1
  $('.el0').cssBefore({
    'content': '"Новый \'before\'"',
    'color': 'green'
  });
  // Случай 2
  $('.el1').cssBefore({
    'content': '"Новый \'before\' №2"',
    'color': 'blue'
  });
  // Случай 3
  $('.el0').cssBefore({
    'content': '"Новый \'before\' №3"'
  });
});
.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element:before {
  content: "Старый 'before'";
  color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="element el0" name="MyName"></div>
<div class="element el0 el1" id="elem"></div>
<div>
  <div class="element el1"></div>
</div>

为什么在第三种情况下第一个元素被涂成蓝色？如何解决？

更新：

如果在每次赋值后将元素的值打印到控制台，那么就会出现非常奇怪的值：

(function () {
    var i = 1;

    var setPseudoElement = function (parameters) {
        for (var element of parameters.elements.get()) {
            if (!element.pseudoElements) element.pseudoElements = {styleSheet: null, before: {index: null, properties: null}, after: {index: null, properties: null}};
            
            var selector = (function () {
                if (element.id) {
                    return '#' + element.id + '::' + parameters.pseudoElement;
                } else {
                    var parentsList = $(element).parents().map(function () {
                        return this.tagName.toLowerCase();
                    }).get().reverse().join(' > ') + ' > ' + element.tagName.toLowerCase();

                    var elementClass = element.classList.length ? '.' + $(element.classList).get().join('.') : '';

                    var elementAttributes = element.hasAttributes() ? $(element.attributes).get().map(function (className) {
                        return className.nodeName !== 'class' ? className.nodeValue ? '[' + className.nodeName + '="' + className.nodeValue + '"]' : '[' + className.nodeName + '"]' : '';
                    }).join('') : '';

                    var elementNthChild = ':nth-child(' + ($(element).index() + 1) + ')';

                    return parentsList + elementClass + elementAttributes + elementNthChild + '::' + parameters.pseudoElement;
                };
            })();

            if (!element.pseudoElements.styleSheet) {
                if (document.styleSheets[0]) {
                    element.pseudoElements.styleSheet = document.styleSheets[0];
                } else {
                    var styleSheet = document.createElement('style');

                    document.head.appendChild(styleSheet);
                    element.pseudoElements.styleSheet = styleSheet.sheet;
                };
            };

            if (element.pseudoElements[parameters.pseudoElement].properties !== null && element.pseudoElements[parameters.pseudoElement].index !== null) {
                element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);
            };

            if (typeof parameters.argument === 'object') {
                if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
                    var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length ||  element.pseudoElements.styleSheet.length;

                    element.pseudoElements[parameters.pseudoElement].index = newIndex;
                    element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
                };

                var properties = '';

                for (var property in parameters.argument) {
                    element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
                };

                for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
                    properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
                };

                element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
            
                console.log('Номер запуска: ' + Math.round(i / 2) + '; Номер присваивания элементу: ' + i);
                console.log({
                    'Элемент 1': $('.el0:not(.el1)').get(0).pseudoElements,
                    'Элемент 2': $('.el0.el1').get(0).pseudoElements,
                    'Элемент 3': $('.el1:not(.el0)').get(0).pseudoElements
                });
                i++;
            } else if (parameters.argument !== undefined && parameters.property !== undefined) {

            } else if (parameters.argument !== undefined && parameters.property === undefined) {

            } else {
                console.error('Invalid values!');
                return false;
            };
        };
    };

    $.fn.cssBefore = function (argument, property) {
        setPseudoElement ({
            elements: this, 
            pseudoElement: 'before', 
            argument: argument, 
            property: property
        });
    };
})();

$(function() {
  // Случай 1
  $('.el0').cssBefore({
    'content': '"Новый \'before\'"',
    'color': 'green'
  });
  // Случай 2
  $('.el1').cssBefore({
    'content': '"Новый \'before\' №2"',
    'color': 'blue'
  });
  // Случай 3
  $('.el0').cssBefore({
    'content': '"Новый \'before\' №3"'
  });
});
.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element:before {
  content: "Старый 'before'";
  color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="element el0" name="MyName"></div>
<div class="element el0 el1" id="elem"></div>
<div>
  <div class="element el1"></div>
</div>

如果您查看控制台，那么在第一次调用该函数时，1 号元素为蓝色，3 号内容

javascript
Martin Hope
Yuri
Asked: 2020-07-17 15:53:52 +0000 UTC
  • 5

我有一个 div，其内容可以通过多种方式更改：例如，可以通过 innerHTML 更改其所有内容，或者可以通过 DOM 方法添加节点。这可以通过本机 javascript、jQuery API 调用或其他库来实现。

我想在 div 的内容发生变化时执行一些代码，但我完全无法控制它何时发生变化。事实上，我正在开发一个可供其他人使用的插件，他们可以根据自己的喜好自由更改其 div 的内容。当这个 div 的内部内容发生变化时，插件的表单也可以更新。

我正在使用 jQuery。有没有办法捕捉 div 内容的变化？

javascript
Martin Hope
Yuri
Asked: 2020-07-14 00:08:43 +0000 UTC
  • 3

有一个带有元素的常规 flebox：

.flexbox {
  display: flex;
  border: 2px solid red;
  padding: 2.5px;
}
.flexbox__item {
  border: 2px solid blue;
  height: 50px;
  margin: 2.5px;
  flex-grow: 1;
}
<div class="flexbox">
  <div class="flexbox__item"></div>
  <div class="flexbox__item offset-1"></div>
  <div class="flexbox__item"></div>
</div>

如何在不使用额外标记的情况下将偏移后的空单元格插入到此 flexbox 中？

那些。你需要它看起来像这样，但没有指定块的宽度。只有弹性增长

.flexbox {
  display: flex;
  border: 2px solid red;
  padding: 2.5px;
}
.flexbox__item {
  border: 2px solid blue;
  height: 50px;
  margin: 2.5px;
  width: 25%;
}

.offset-1 {
  margin-right: calc(25% + 5px);
}
<div class="flexbox">
  <div class="flexbox__item"></div>
  <div class="flexbox__item offset-1"></div>
  <div class="flexbox__item"></div>
</div>

细胞数量未知。Offset-1意味着你需要让一个单元格为空，offset-2- 两个，等等。

css
Martin Hope
Yuri
Asked: 2020-07-13 03:37:30 +0000 UTC
  • 0

父元素有子元素，其中一些位于一行，一些位于另一行。

.box {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid blue;
  padding: 2px;
}

.el {
  height: 50px;
  border: 2px solid red;
  margin: 2px;
}

.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
  flex-grow: 3;
}

.el:nth-child(5), .el:nth-child(6) {
  flex-grow: 2;
}

.break {
  width: 100%;
}
<div class="box">
  <div class="el"></div>
  <div class="el select"></div>
  <div class="el"></div>
  <div class="break"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>

如何确定一个元素在同一行中是否有右邻居或左.el.select邻居？.el

即应该显示右边有吸：

.box {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid blue;
  padding: 2px;
}

.el {
  height: 50px;
  border: 2px solid red;
  margin: 2px;
}

.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
  flex-grow: 3;
}

.el:nth-child(5), .el:nth-child(6) {
  flex-grow: 2;
}

.el.select {
  border-color: green;
}

.break {
  width: 100%;
}
<div class="box">
  <div class="el"></div>
  <div class="el select"></div>
  <div class="el"></div>
  <div class="break"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>

这里 - 不在右边的是：

.box {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid blue;
  padding: 2px;
}

.el {
  height: 50px;
  border: 2px solid red;
  margin: 2px;
}

.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
  flex-grow: 3;
}

.el:nth-child(5), .el:nth-child(6) {
  flex-grow: 2;
}

.el.select {
  border-color: green;
}

.break {
  width: 100%;
}
<div class="box">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el select"></div>
  <div class="break"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>

这是缺少的东西：

.box {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid blue;
  padding: 2px;
}

.el {
  height: 50px;
  border: 2px solid red;
  margin: 2px;
}

.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
  width: calc(33.33333333% - 8px);
}

.el:nth-child(4), .el:nth-child(5) {
  width: calc(50% - 8px);
}

.el.select {
  border-color: green;
}
<div class="box">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el select"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>

javascript
Martin Hope
Yuri
Asked: 2020-07-11 00:41:59 +0000 UTC
  • 6

我正在使用 flexbox 制作表格并注意到一个有趣的功能 - br 元素在 flexbox 中不能做任何事情。

例子：

.flexbox {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
  padding: 2px;
}
.item {
  width: 50px;
  height: 50px;
  margin: 2px;
  border: 2px solid blue;
}

.new-row, br {
  display: block;
  width: 100%;
  height: 0px;
}
<p>Перенос с помощью div'a:</p>
<div class="flexbox">
  <div class="item"></div>
  <div class="item"></div>
  <div class="new-row"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<p>Перенос с помощью br:</p>
<div class="flexbox">
  <div class="item"></div>
  <div class="item"></div>
  <br>
  <div class="item"></div>
  <div class="item"></div>
</div>

在示例中，div 和 br 具有相同的属性，但 div 包装了元素，而 br 则没有。

为什么？

css
Martin Hope
Yuri
Asked: 2020-07-10 21:37:48 +0000 UTC
  • 11

有一个 Flexbox 网格。

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
</div>

如何换.new-string行和它后面的元素一起换行？

html
Martin Hope
Yuri
Asked: 2020-07-09 17:22:57 +0000 UTC
  • 2

有一个引导框架。该框架使用负缩进技术。

例子：

.container {
  border: 2px solid red;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 15px;
}
.row {
  margin: 0 -15px;
  border: 2px solid blue;
  overflow: hidden;
}
.col {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.33333333%;
  border: 2px solid yellow;
  float: left;
  height: 100px;
}
<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

那么，他们是从哪里得到需要缩进 15 像素而不是 12 像素的想法的呢？如何选择最佳偏移量？你需要远离什么？

css
Martin Hope
Yuri
Asked: 2020-07-06 20:00:26 +0000 UTC
  • 0

为数字和数组编写了一个异常函数。一切正常，但问题是代码对于这样的功能来说太大了。你如何优化（减少）这个功能？

(function() {
  $.random = function(int__min, int__max, exceptions, tof__integer) {
    if (int__min instanceof Array) {
      var int__min_length = int__min.length - 1,
        arr_exceptions = null;

      if (int__max instanceof Array) {
        arr_exceptions = [];

        $.each(int__max, function(idx, el) {
          arr_exceptions[arr_exceptions.length] = int__min.indexOf(el);
        });
      } else {
        arr_exceptions = int__min.indexOf(int__max);
      };

      return int__min[$.random(0, int__min_length, arr_exceptions, true)];
    } else if (typeof int__min === 'number' && typeof int__max === 'number') {
      if (!int__min) int__min = 0;
      if (!int__max) int__max = 10;
      if (int__min > int__max) {
        var int__min_val = int__min,
          int__max_val = int__max;

        int__min = int__max_val;
        int__max = int__min_val;
      };

      var int__random = null;
      if (tof__integer === undefined || tof__integer === true) {
        int__random = Math.floor(Math.random() * (int__max + 1 - int__min) + int__min);
      } else {
        int__random = Math.random() * (int__max + 0.1 - int__min) + int__min;
      };

      if (typeof exceptions === 'number' || typeof exceptions === 'string') {
        if (exceptions !== int__random) {
          return int__random;
        } else {
          return $.random(int__min, int__max, exceptions, tof__integer);
        };
      } else if (exceptions instanceof Array) {
        var tof__resolution = true;

        $.each(exceptions, function(idx, el) {
          if (int__random === el) tof__resolution = false;
        });

        if (tof__resolution) {
          return int__random;
        } else {
          return $.random(int__min, int__max, exceptions, tof__integer);
        };
      } else {
        return int__random;
      };
    } else {
      console.error('UARR.RANDOM: Invalid values!');
    };
  };
})();

(function() {
  console.log( $.random( 0, 10, null, false ) );
  console.log( $.random( 0, 10, null, true ) );
  console.log( $.random( 0, 10, [5, 6, 7, 8] ) );
  
  console.log( $.random( ['a', 'b', 'c'], 'a' ) );
  console.log( $.random( ['a', 'b', 'c'], ['a', 'c'] ) );
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

对于数字：

$.random( a, b, c, d );

a - Минимальное число
b - Максимальное число
c - Исключения (число, которое не нужно показывать. Можно указывать массивом)
d - Целые числа или нет (true/false)

对于数组：

$.random( a, b );

a - Массив данных
b - Исключения (значения, которые не нужно показывать. Можно указывать массивом)
javascript
Martin Hope
Yuri
Asked: 2020-07-06 17:03:34 +0000 UTC
  • 5

有两个街区。第一个块具有动态宽度，即 宽度取决于内容。第二个块应拉伸到（自由）宽度的其余部分。

.parent {
  border: 2px solid red;
  height: 30px;
  line-height: 26px;
}
.child {
  display: inline-block;
  border: 2px solid blue;
}
<div class="parent">
  <div class="child">Содержимое</div>
  <div class="child max">Второе содержимое</div>
</div>

如何使用 CSS 将第二个块拉伸到整个自由宽度？

html
Martin Hope
Yuri
Asked: 2020-07-05 19:05:18 +0000 UTC
  • 3

我遇到了一个问题：当为所有子元素指定 float 时，父元素的高度就会丢失，即 去了0px。

例子：

.parent {
  width: 162px;
  border: 2px solid red;
}
.children {
  width: 50px;
  height: 50px;
  border: 2px solid blue;
  float: left;
}
<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

为什么父元素不再考虑子元素的高度？怎么修？

css
Martin Hope
Yuri
Asked: 2020-07-02 00:20:01 +0000 UTC
  • 6

有一个页面由两个主要块（.header和.main）组成。该块.header有position: fixed.

问题是块.main流入块.header。那些。进入街区.header。

body { margin: 5px; }

.header {
  position: fixed;
  left: 5px;
  right: 5px;
  top: 5px;
  height: 48px;
  background-color: white;
  box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red, inset -2px -2px 0px red;
}

.main {
  height: 120px;
  background-color: white;
  box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px blue, inset -2px -2px 0px blue;
}
<div class="header">
</div>
<div class="main">
</div>

这个问题可以通过添加另一个与 相同高度的块来解决.header。但这是行不通的，因为在整个过程中.header它可以改变它的高度（使用脚本，改变宽度等）。同时.main，它也应该保持在下方.header，它会再次下降。

$(function() {
  var $header = $('.header');

  setInterval(function() {
    $header.animate({height: 96 + 'px'}, 400);
      
    setTimeout(function() {
      $header.animate({height: 48 + 'px'}, 400);
    }, 800);
    
    setTimeout(function() {
      $header.css({height: 'auto'}).animate({right: 80 + '%'}, 400);
      
      setTimeout(function() {
        $header.animate({right: 5 + 'px'}, {
          duration: 400,
          complete: function() {
            $header.css({height: 48 + 'px'})
          }
        });
      }, 800);
    }, 2600);
  }, 5200);
});
body { margin: 5px; }

.header {
  position: fixed;
  left: 5px;
  right: 5px;
  top: 5px;
  height: 48px;
  background-color: white;
  box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red, inset -2px -2px 0px red;
}

.main {
  height: 120px;
  background-color: white;
  box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px blue, inset -2px -2px 0px blue;
}

.displacer {
  height: 48px;
  background-color: white;
  box-shadow: inset 2px 2px 0px green, inset -2px 2px 0px green, inset 2px -2px 0px green, inset -2px -2px 0px green;
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="displacer">
</div>
<div class="header">
  <div style="width: 100px; height: 48px;"></div>
  <div style="width: 100px; height: 48px;"></div>
</div>
<div class="main">
</div>

一般来说，这里：

  • .header可以改变大小，但同时，.main它必须仍然在它下面。
  • .header应该留在原处——在页面顶部position: fixed

如何解决这个问题？

javascript
Martin Hope
Yuri
Asked: 2020-06-22 20:32:02 +0000 UTC
  • 1

我想做一个轻量级的可视化文本编辑器。为此，我使用了添加 BB 代码的标准功能。

$(document).ready(function() {
  $('.bb_bar a').click(function() {
    var button_id = attribs = $(this).attr("alt");
    button_id = button_id.replace(/\[.*\]/, '');
    if (/\[.*\]/.test(attribs)) {
      attribs = attribs.replace(/.*\[(.*)\]/, ' $1');
    } else attribs = '';
    var start = '[' + button_id + attribs + ']';
    var end = '[/' + button_id + ']';
    insert(start, end);
    return false;
  });
});

function insert(start, end) {
  element = document.getElementById('user_text');
  if (document.selection) {
    element.focus();
    sel = document.selection.createRange();
    sel.text = start + sel.text + end;
  } else if (element.selectionStart || element.selectionStart == '0') {
    element.focus();
    var startPos = element.selectionStart;
    var endPos = element.selectionEnd;
    element.value = element.value.substring(0, startPos) + start + element.value.substring(startPos, endPos) + end + element.value.substring(endPos, element.value.length);
  } else {
    element.value += start + end;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bb_bar">
  <a href="#" alt="b">Жирный</a>
  <a href="#" alt="i">Курсив</a>
  <a href="#" alt="u">Подчеркнутый</a>
  <a href="#" alt='a[href=""]'>Ссылка</a>
</div>
<textarea id="user_text">апрап апраркаер кер кен кн ке рапрапрап аррукерек апраопр укеекврпап ропроенгк вапвке рнооапрок</textarea>

问题是，如果选中的文本已经在[b]...[/b]中，那么当你再次按下它时，它会再次设置[b]...[/b]，而你想要[/b ]... [b]。那些。这样它就不会在元素中插入元素，而是抛出异常。

给不懂的举个例子：

这里我们有带 BB 的文本：

Люб[b]ой текст, где мы встав[/b]или код.

选择已经在[b] ... [/b]中的文本时，它将做到这一点：

Люб[b]ой текст, [b]где[/b] мы встав[/b]или код.

它需要是这样的：

Люб[b]ой текст, [/b]где[b] мы встав[/b]или код.
javascript