在 javascript 的运行时间创建 .json 文件并在最后保存

Question

这是我的脚本。它正在做两件事。

鼠标悬停时突出显示文本
在突出显示的文本上，单击时会打开上下文菜单

我接下来要做的是：

取高亮文字为key
从上下文菜单中选择的选项为value
以JSON格式保存key:value对
将JSON写入文件

我是网络新手，需要有关如何操作的建议。到目前为止，我的菜单项是可点击的，但接下来要做什么以及如何实现我想要实现的是我需要帮助的问题。

<!DOCTYPE html>
<html>

<head>
  <title>TEST</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="context_menu.js"></script>


  <style type="text/css">
    .red {
      color: red;
    }
    
    ;
    body {
      font-family: "Roboto", san-serif;
    }
    
    .center {
      text-align: center;
    }
    
    .menu {
      width: 120px;
      z-index: 1;
      box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
      position: fixed;
      display: none;
      transition: 0.2s display ease-in;
      .menu-options {
        list-style: none;
        padding: 10px 0;
        z-index: 1;
        .menu-option {
          font-weight: 500;
          z-index: 1;
          font-size: 14px;
          padding: 10px 40px 10px 20px;
          // border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
          cursor: pointer;
          &:hover {
            background: rgba(0, 0, 0, 0.2);
          }
        }
      }
    }
    
    button {
      background: grey;
      border: none;
      .next {
        color: green;
      }
      &[disabled="false"]:hover {
        .next {
          color: red;
          animation: move 0.5s;
          animation-iteration-count: 2;
        }
      }
    }
    
    @keyframes move {
      from {
        transform: translate(0%);
      }
      50% {
        transform: translate(-40%);
      }
      to {
        transform: transform(0%);
      }
    }
  </style>

  <body>


    <div class="menu">
      <ul class="menu-options">
        <li class="menu-option" id="demo" onclick="myFunction()">Animal</li>
        <li class="menu-option">Bird</li>
        <li class="menu-option">Human</li>
        <li class="menu-option">Alien</li>
        <li class="menu-option">No one</li>
      </ul>
    </div>

    <div class="select--highlight--active">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset imply dummy text sheets containing Lorem Ipsum passages, and more
      recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

  </body>
  <script>
    const menu = document.querySelector(".menu");
    console.log(menu)
    let menuVisible = false;
    const toggleMenu = command => {
      console.log("Togel : " + command)
      menu.style.display = command === "show" ? "block" : "none";
      menuVisible = !menuVisible;
    };

    const setPosition = ({
      top,
      left
    }) => {
      console.log(top)
      console.log(left)
      menu.style.left = `${left}px`;
      menu.style.top = `${top}px`;
      toggleMenu("show");
    };

    // window.addEventListener("click", e => {
    //    
    // });

    $(function() {
      thisRespondHightlightText(".select--highlight--active");
    });
    /*thisRespondHightlightText(".select--highlight--active");*/


    function thisRespondHightlightText(thisDiv) {
      $(thisDiv).on("mouseup", function() {
        console.log("EVENT")
        var selectedText = getSelectionText();
        var selectedTextRegExp = new RegExp(selectedText, "g");
        var text = $(this).text().replace(selectedTextRegExp, "<span class='red'>" + selectedText + "</span>");
        console.log("Text " + selectedText)
        $(this).html(text);
        if (selectedText == "") {
          toggleMenu("hide");
        } else {

          const origin = {
            left: 100,
            top: 100
          };
          setPosition(origin);
        }

      });
    }

    function getSelectionText() {
      var text = "";
      if (window.getSelection) {
        text = window.getSelection().toString();
      } else if (document.selection && document.selection.type != "Control") {
        alert("In else")
        text = document.selection.createRange().text;
      }

      return text;
    }

    function myFunction() {
      document.getElementById("demo").innerHTML = "I am an Animal!";
    }
  </script>
</head>



</html>

Answer 1

要创建 JSON 数据，请使用

声明它

var jsonData = {};

然后分配key:value项给它

jsonData[key] = value;

您稍后可以使用密钥访问其数据

var value = jsonData.key;
var value = jsonData['key'];

在 javascript 的运行时间创建 .json 文件并在最后保存

create .json file on run time in javascript and save it in the end

html

javascript

jquery

contextmenu

web

在 javascript 的 运行 时间创建 .json 文件并在最后保存

create .json file on run time in javascript and save it in the end

html

javascript

jquery

contextmenu

web

在 javascript 的运行时间创建 .json 文件并在最后保存